<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> 焦点图 JS 插件 - myFocus </title>

  <link href="css/layout.css" rel="stylesheet">
</head>

<body>
<img src="img/logo.gif"/>
<h3> myFocus ——一个专注于 Web 的焦点图/轮播图的 JS 库 </h3>

<div id="focus_box">
  <div id="focus">
    <!-- 载入画面(可删除) -->
    <div class="loading"></div>

    <!-- 图片列表 -->
    <div class="pic">
      <ul>
        <li><a href="#"><img src="img/1.jpg" alt="图片1说明" text="图片1更详细的描述文字"/></a></li>
        <li><a href="#"><img src="img/2.jpg" alt="图片2说明" text="图片2更详细的描述文字"/></a></li>
        <li><a href="#"><img src="img/3.jpg" alt="图片3说明" text="图片3更详细的描述文字"/></a></li>
        <li><a href="#"><img src="img/4.jpg" alt="图片4说明" text="图片4更详细的描述文字"/></a></li>
        <li><a href="#"><img src="img/5.jpg" alt="图片5说明" text="图片5更详细的描述文字"/></a></li>
        <li><a href="#"><img src="img/6.jpg" alt="图片6说明" text="图片6更详细的描述文字"/></a></li>
        <li><a href="#"><img src="img/7.jpg" alt="图片7说明" text="图片7更详细的描述文字"/></a></li>
        <li><a href="#"><img src="img/8.jpg" alt="图片8说明" text="图片8更详细的描述文字"/></a></li>
        <li><a href="#"><img src="img/9.jpg" alt="图片9说明" text="图片9更详细的描述文字"/></a></li>
        <li><a href="#"><img src="img/10.jpg" alt="图片10说明" text="图片10更详细的描述文字"/></a></li>
        <li><a href="#"><img src="img/11.jpg" alt="图片11说明" text="图片11更详细的描述文字"/></a></li>
        <li><a href="#"><img src="img/12.jpg" alt="图片12说明" text="图片12更详细的描述文字"/></a></li>
        <li><a href="#"><img src="img/13.jpg" alt="图片13说明" text="图片5更详细的描述文字"/></a></li>
      </ul>
    </div>
  </div>
  <div id="clear"></div>
</div>

<div id="focus_set"> 风格应用选择：
  <select id="focus_pattern">
    <option value="mF_fscreen_tb">mF_fscreen_tb</option>
    <option value="mF_games_tb">mF_games_tb</option>
    <option value="mF_YSlider">mF_YSlider</option>
    <option value="mF_51xflash">mF_51xflash</option>
    <option value="mF_expo2010">mF_expo2010</option>
    <option value="mF_luluJQ">mF_luluJQ</option>
    <option value="mF_ladyQ">mF_ladyQ</option>
    <option value="mF_liquid">mF_liquid</option>
    <option value="mF_liuzg">mF_liuzg</option>
    <option value="mF_pithy_tb">mF_pithy_tb</option>
    <option value="mF_qiyi">mF_qiyi</option>
    <option value="mF_quwan">mF_quwan</option>
    <option value="mF_rapoo">mF_rapoo</option>
    <option value="mF_sohusports">mF_sohusports</option>
    <option value="mF_taobao2010">mF_taobao2010</option>
    <option value="mF_taobaomall">mF_taobaomall</option>
    <option value="mF_tbhuabao">mF_tbhuabao</option>
    <option value="mF_pconline">mF_pconline</option>
    <option value="mF_peijianmall">mF_peijianmall</option>
    <option value="mF_classicHC">mF_classicHC</option>
    <option value="mF_classicHB">mF_classicHB</option>
    <option value="mF_slide3D">mF_slide3D</option>
    <option value="mF_kiki">mF_kiki</option>
    <option style="color:#f00;" value="mF_fancy" selected="selected">mF_fancy</option>
    <option style="color:#f00;" value="mF_dleung">mF_dleung</option>
    <option style="color:#f00;" value="mF_kdui">mF_kdui</option>
    <option style="color:#f00;" value="mF_shutters">mF_shutters</option>
  </select>
</div>

<p>适用浏览器：Chrome、FireFox、IE8及以上、360、Safari、Opera、傲游、搜狗、世界之窗。</p>

<script src="js/myfocus-2.0.4.min.js" charset="utf-8"></script>

<script>
  //封装通过id获取元素的方法
  var $id = function (id) {
    return document.getElementById(id);
  }

  //重置焦点图盒子的内容
  var originalHTML = $id('focus_box').innerHTML;

  function resetHTML() {
    $id('focus_box').innerHTML = originalHTML;
  }

  //设置焦点图切换样式
  function setFocus(pattern) {
    myFocus.set({
      id: 'focus', //焦点图盒子ID
      pattern: pattern, //焦点图风格的名称
      time: 3, //切换时间间隔(秒)
      trigger: 'mouseover', //触发切换模式：'click'(点击)/'mouseover'(悬停)
      delay: 300, //'mouseover'模式下的切换延迟(毫秒)
      auto: true, //是否自动播放(切换)[true|false]
      txtHeight: 'default' //标题高度设置(像素)：'default'为默认CSS高度，0为隐藏
    });
  }

  window.onload = setFocus($id('focus_pattern').value);

  $id('focus_pattern').onchange = function () {
    resetHTML();
    setFocus(this.value);
  }
</script>
</body>
</html>
